<template>
  <div class="containerx">
    <el-container>
      <el-header>
        <div class="header-box">
          <div class="header-left">
            线上小商城后台
          </div>
          <div class="header-right">
            <div class="header-right-item">
              <span>{{ user.username }}</span>，欢迎登陆
            </div>
            <div class="header-right-item">
              <span @click="onLogout"><i class="iconfont icon-tuichudenglu"></i> 退出登陆</span>
            </div>
          </div>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu
            active-text-color="#ffd04b"
            background-color="#545c64"
            text-color="#fff"
            :router="true"
            :default-active="$route.path"
          >
            <el-menu-item index="/home/home">
              <i class="iconfont icon-shouye"></i>
              <span>首页</span>
            </el-menu-item>
            <el-menu-item index="/home/user">
              <i class="iconfont icon-yonghuguanli"></i>
              <span>用户管理</span>
            </el-menu-item>
            <el-menu-item index="/home/goods">
              <i class="iconfont icon-shangpinguanli"></i>
              <span>商品管理</span>
            </el-menu-item>
            <el-menu-item index="/home/order">
              <i class="iconfont icon-dingdanguanli"></i>
              <span>订单管理</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main><router-view></router-view></el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ref, onBeforeMount, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";

const store = useStore();
const route = useRoute();
const router = useRouter();

const user = computed(() => {
  return store.state.user.user;
});

function onLogout() {
  store.dispatch("user/logOut");
}

onBeforeMount(() => {
  store.dispatch("user/getMe");
});
</script>

<style lang="scss" scoped>
.containerx {
  width: 100vw;
  height: 100vh;
  ::v-deep(.el-container) {
    height: 100%;
    width: 100%;
    .el-header {
      width: 100%;
      height: 65px;
      background: #545c64;
      .header-box {
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #fff;
        .header-left {
          width: 200px;
          font-size: 24px;
          font-weight: bold;
        }
        .header-right {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          gap: 10px;
          .header-right-item {
            span {
              &:hover {
                text-decoration: underline;
                cursor: pointer;
              }
            }
          }
        }
      }
    }
    .el-aside {
      height: 100%;
      background-color: #545c64;
      .el-menu {
        border: 0 !important;
        .iconfont {
          padding-right: 5px;
        }
      }
    }
    .el-main {
      padding: 10px;
    }
  }
}
</style>